<template>
  <el-dialog width="60%" :title="title" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
      label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="dataForm.name" placeholder="用户名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式" prop="mobile">
            <el-input v-model="dataForm.mobile" type="number" placeholder="联系方式"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="法人" prop="legalPersonName">
            <el-input v-model="dataForm.legalPersonName" placeholder="法人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态 " prop="status">
            <!-- 1:新增，2：支付：3过期 -->
            <!-- <el-input v-model="dataForm.status" placeholder="状态 1:新增，2：支付：3过期"></el-input> -->
            <el-select v-model="dataForm.status" placeholder="商户状态" clearable style="width: 100%">
              <el-option v-for="(item,index) in ['未开启','运营中']" :key="index"
                :label="item" :value="index" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="12">
          <el-form-item label="有效开始日期" prop="startTime">
            <el-date-picker v-model="dataForm.startTime" style="width: 100%" value-format="yyyy-MM-dd"
              type="date"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有效结束日期" prop="endTime">
            <el-date-picker v-model="dataForm.endTime" style="width: 100%" value-format="yyyy-MM-dd"
              type="date"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="账号" prop="loginName">
            <el-input v-model="dataForm.loginName" disabled placeholder="账号"></el-input>
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item label="所在地址" prop="location">
            <el-input v-model="dataForm.location" placeholder="所在地址"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
      
        <el-col :span="12">
          
          <el-form-item label="社会信用代码" prop="licenseId">
            <el-input v-model="dataForm.licenseId" placeholder="社会信用代码"></el-input>
          </el-form-item>
        </el-col>
        
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="营业执照" prop="businessLicense">
            <upload name="businessLicense" :path="dataForm.businessLicense" @imgChange="imgChange"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <div id="map" style="height: 320px; "></div>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>

  import {
    addOrUpdate
  } from "@/api/business/franchiseeinfo";
  import {
    
    codeToText,
    pcacodeArr
  } from 'element-china-area-data'
  import AMapLoader from '@amap/amap-jsapi-loader';
  export default {
    dicts: ['sys_franchiseeinfo_status'],
    data() {
      return {
        selectedOptions: [],
        title: '',
        visible: false,
        dataForm: {
          id: 0,
          name: '',
          mobile: '',
          legalPersonName: '',
          createTime: '',
          createBy: '',
          delFlag: '',
          delTime: '',
          status: 0,
          businessLicense: '',
          startTime: '',
          endTime: '',
          revenue: '',
          address: '',
          location: ''
        },
        typeList: [{
            code: 1,
            name: '平台扣费'
          },
          {
            code: 2,
            name: '按月缴纳'
          }
        ],
        dataRule: {
          name: [{
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
          }],
          mobile: [{
              required: true,
              message: '手机号不能为空',
              trigger: 'blur'
            },
            {
              pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
              message: '手机号格式不对',
              trigger: 'blur'
            }
          ],
          legalPersonName: [{
            required: true,
            message: '法人不能为空',
            trigger: 'blur'
          }],
          licenseId: [{
              required: true,
              message: '社会信用代码不能为空',
              trigger: 'blur'
            },
            {
              pattern: /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/,
              message: '社会信用代码格式不对',
              trigger: 'blur'
            }
          ],
          legalPersonName: [{
            required: true,
            message: '法人不能为空',
            trigger: 'blur'
          }],
          
          
          status: [{
            required: true,
            message: '状态不能为空',
            trigger: 'blur'
          }],
         
          location: [{
            required: true,
            message: '所在地址不能为空',
            trigger: 'blur'
          }],
          
          
        }
      }
    },
    mounted() {
      this.$nextTick(() => {})
    },
    methods: {
      imgChange(e){
        this.dataForm.businessLicense = e;
        this.$forceUpdate();
      },
      handleChange(val) {
        this.getCodeToText(val);
      },
      getCodeToText(codeArr) {
        let area = ""
        switch (codeArr.length) {
          case 1:
            area += codeToText[codeArr[0]];
            break;
          case 2:
            area += codeToText[codeArr[0]] + "/" + codeToText[codeArr[1]];
            break;
          case 3:
            area += codeToText[codeArr[0]] + "/" + codeToText[codeArr[1]] + "/" + codeToText[codeArr[2]];
            this.dataForm.city = codeToText[codeArr[2]]
            this.dataForm.cityCode = codeArr[2]
            break;
          default:
            break;
        }
        return area
      },
      init(record) {
        this.visible = true
        this.dataForm = record
        if (this.dataForm && this.dataForm.id) {
          this.title = '商户信息' + '修改'
          
        } else {
          this.title = '商户信息' + "新增"
        }

        AMapLoader.load({
          key: "f40461c5d6fa5deb48fca636711dc08c",
          plugins: ["AMap.Scale", "AMap.Geocoder", " AMap.InfoWindow", "AMap.ToolBar", 'AMap.SimpleInfoWindow'],
        }).then((AMap) => {
          this.map = new AMap.Map("map", {
            zoom: 8,
            center: [114.357456, 37.712248],
            mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
            viewMode: '3D',
          });
          var markerIcon = new AMap.Icon({
            size: new AMap.Size(20, 68),
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
            imageSize: new AMap.Size(22, 30),
          });
          if (this.dataForm.id) {
            this.marker = new AMap.Marker({
              icon: markerIcon,
              position: [this.dataForm.longitude, this.dataForm.latitude],
              offset: new AMap.Pixel(-11, -30),
            });
            this.marker.setMap(this.map);
          }
          this.map.on('click', (e) => {
            this.dataForm.longitude = e.lnglat.getLng()
            this.dataForm.latitude = e.lnglat.getLat();
            if (null != this.marker) this.map.remove(this.marker);
            this.marker = new AMap.Marker({
              icon: markerIcon,
              position: [e.lnglat.getLng(), e.lnglat.getLat()],
              offset: new AMap.Pixel(-11, -30),
            });
            this.marker.setMap(this.map);
          });
        }).catch(e => {
          console.log(e);
        });
        
      },

      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            addOrUpdate(this.dataForm).then(res => {
              this.visible = false
              this.$modal.msgSuccess(this.title + "成功");
              this.$emit('refreshDataList')
            })
          }
        })
      }
    }
  }
</script>
